<template>
	<view class="content-header">
		<view class="add-header-cen">
			<view class="add-header flex-row flex-content-between">
				<view v-for="(tab,index) in tabList">
					<view :class="index==current?`add-header-ac`:`add-header-nc`" @tap="changeTab(index)">
						{{tab}}
					</view>
				</view>
			</view>
		</view>
		<view class="top20"></view>
		<view class="detal">
			<view class="detal-body">
				<!-- 储蓄卡选项 -->
				<uni-forms ref="form1" :modelValue="form1" :rules="rulesform1" v-if="current==0" class="flex-column">
					<uni-forms-item label="" name="user_name">
						<view class="detal-body-one flex-row flex-content-between">
							<view class="detal-body-title">持卡人姓名</view>
							<view class="detal-body-input"><input class="" v-model="form1.user_name" placeholder="请输入姓名"
									placeholder-class="detal-body-p" /></view>
						</view>
					</uni-forms-item>
					<view class="detal-body-one flex-row flex-content-between">
						<view class="detal-body-title">证件类型</view>
						<view class="detal-body-input flex-row flex-item-center">
							<view class="detal-body-txt">
								<picker mode="selector" :range="id_types" @change="change">
									<view :class="form1.id_type?`detal-body-se`:``">
										{{form1.id_type?form1.id_type:"请选择"}}</view>
								</picker>
							</view>
							<image class="detal-body-img" src="../../static/index/you.png" mode="scaleToFill"></image>
						</view>
					</view>
					<uni-forms-item label="" name="id_num">
						<view class="detal-body-one flex-row flex-content-between">
							<view class="detal-body-title">证件号码</view>
							<view class="detal-body-input"><input class="" v-model="form1.id_num" placeholder="请输入证件号码"
									placeholder-class="detal-body-p" /></view>
						</view>
					</uni-forms-item>
					<view class="detal-body-one flex-row flex-content-between">
						<view class="detal-body-title">银行</view>
						<view class="detal-body-input">
							<mu-select-seach class="banks" @change="selectedBank" :localdata="bankList"
								placeholder="请输入银行"></mu-select-seach>
						</view>
					</view>
					<uni-forms-item label="" name="card_num">
						<view class="detal-body-one flex-row flex-content-between">
							<view class="detal-body-title">储蓄卡号</view>
							<view class="detal-body-input khap"><input class="" v-model="form1.card_num"
									placeholder="请输入储蓄卡号码" placeholder-class="detal-body-p" /></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="" name="user_mobile">
						<view class="detal-body-oness flex-row flex-content-between">
							<view class="detal-body-title">银行签约手机号</view>
							<view class="detal-body-input"><input class="" v-model="form1.user_mobile"
									placeholder="请输入银行签约手机号" placeholder-class="detal-body-p" /></view>
						</view>
					</uni-forms-item>
				</uni-forms>




				<!-- 信用卡选项 -->
				<uni-forms ref="form2" :modelValue="form2" :rules="rulesform2" v-if="current==1" class="flex-column">

					<uni-forms-item label="" name="user_name">
						<view class="detal-body-one flex-row flex-content-between">
							<view class="detal-body-title">持卡人姓名</view>
							<view class="detal-body-input"><input class="" v-model="form2.user_name" placeholder="请输入姓名"
									placeholder-class="detal-body-p" /></view>
						</view>
					</uni-forms-item>
					<view class="detal-body-one flex-row flex-content-between">
						<view class="detal-body-title">证件类型</view>
						<view class="detal-body-input flex-row flex-item-center">
							<view class="detal-body-txt">
								<picker mode="selector" :range="id_types" @change="change">
									<view :class="form2.id_type?`detal-body-se`:``">
										{{form2.id_type?form2.id_type:"请选择"}}</view>
								</picker>
							</view>
							<image class="detal-body-img" src="../../static/index/you.png" mode="scaleToFill"></image>
						</view>
					</view>
					<uni-forms-item label="" name="id_num">
						<view class="detal-body-one flex-row flex-content-between">
							<view class="detal-body-title">证件号码</view>
							<view class="detal-body-input"><input class="" v-model="form2.id_num" placeholder="请输入证件号码"
									placeholder-class="detal-body-p" /></view>
						</view>
					</uni-forms-item>
					<view class="detal-body-one flex-row flex-content-between">
						<view class="detal-body-title">银行</view>
						<view class="detal-body-input">
							<mu-select-seach class="banks" @change="selectedBank" :localdata="bankList"
								placeholder="请输入银行"></mu-select-seach>
						</view>
					</view>
					<uni-forms-item label="" name="card_num">
						<view class="detal-body-one flex-row flex-content-between">
							<view class="detal-body-title">信用卡号</view>
							<view class="detal-body-input"><input class="" v-model="form2.card_num"
									placeholder="请输入信用卡号" placeholder-class="detal-body-p" /></view>
						</view>
					</uni-forms-item>
					<view class="detal-body-one flex-row flex-content-between">
						<view class="detal-body-title">信用卡有效期</view>
						<view class="detal-body-input">
							<picker mode="date" @change="changeDate" fields="month">
								<view :class="form2.expiration_date?`detal-body-se`:``">
									{{form2.expiration_date?form2.expiration_date:"请选择"}}</view>
							</picker>
						</view>
					</view>
					<uni-forms-item label="" name="user_mobile">
						<view class="detal-body-one flex-row flex-content-between">
							<view class="detal-body-title">银行签约手机号</view>
							<view class="detal-body-input"><input class="" v-model="form2.user_mobile"
									placeholder="请输入银行签约手机号" placeholder-class="detal-body-p" /></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="" name="cvn">
						<view class="detal-body-oness flex-row flex-content-between">
							<view class="detal-body-title">信用卡安全码</view>
							<view class="detal-body-input"><input class="" v-model="form2.cvn" placeholder="请输入信用卡安全码"
									placeholder-class="detal-body-p" /></view>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="flex-row flex-item-center yedu-top">
					<image class="yedu-img" @tap="yued=!yued"
						:src="yued?`../../static/order/ok.png`:`../../static/order/not.png`" mode=""></image>
					<view class="yedu-txt">我已阅读并同意<text @tap="xieyi">《第三方协议》</text></view>
				</view>
			</view>
			<mu-suspension bottom="110" :is_position="true">
				<view class="foot">
					<view class="foot-txt" @tap="submit">确认添加</view>
				</view>

			</mu-suspension>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yued: false, //是否已阅读
				current: 0, //选择的tab
				bankList: [], //银行列表
				id_types: [
					"身份证",
					// "三证合一"
				],
				tabList: [
					"储蓄卡",
					"信用卡"
				],
				bankName: "",
				form1: {
					user_name: "",
					id_num: "",
					card_num: "",
					user_mobile: "",
					id_type: "身份证",
					type: 1,
					mumerchant_bank_id: ""
				},
				form2: {
					user_name: "",
					id_num: "",
					card_num: "",
					user_mobile: "",
					cvn: "",
					expiration_date_year: "",
					expiration_date_month: "",
					id_type: "身份证",
					type: 2,
					mumerchant_bank_id: ""
				},
				rulesform1: {
					user_name: {
						rules: [{
							required: true,
							errorMessage: '请填写持卡人姓名',
						}]
					},
					user_mobile:{
						rules:[{
							require:true,
							errorMessage:"请填写签约手机",
						},{
							pattern:/^1[3-9][0-9]{9}$/,
							errorMessage:"请填写正确的手机号码"
						}]
					},
					id_num:{
						rules:[{
							require:true,
							errorMessage:"请填写证件号码",
						},{
							maxLength:18,
							errorMessage:"请填写证件号码"
						}]
					},
					card_num:{
						rules:[{
							require:true,
							errorMessage:"请填写卡号",
						}]
					}
				},
				rulesform2: {
user_name: {
						rules: [{
							required: true,
							errorMessage: '请填写持卡人姓名',
						}]
					},
					user_mobile:{
						rules:[{
							require:true,
							errorMessage:"请填写签约手机",
						},{
							pattern:/^1[3-9][0-9]{9}$/,
							errorMessage:"请填写正确的手机号码"
						}]
					},
					id_num:{
						rules:[{
							require:true,
							errorMessage:"请填写证件号码",
						},{
							maxLength:18,
							errorMessage:"请填写证件号码"
						}]
					},
					card_num:{
						rules:[{
							require:true,
							errorMessage:"请填写卡号",
						}]
					},
					cvn:{
						rules:[{
							require:true,
							errorMessage:"请填写安全码",
						}]
					}
				}
			}
		},
		onLoad(opt) {
			if (opt.current) {
				this.current = opt.current
			} else {
				this.current = 0;
			}
			this.getBankList();
		},
		methods: {
			//提交
			submit() {
				let yued = this.yued;
				if (yued == false) {
					this.$utils.showMessage("请先阅读协议")
					return
				}
				let current = this.current;
				let form = null;
				let that = this;
				if (current == 0) {
					form = this.form1
					this.$refs.form1.validate().then(res=>{
						if(!form.mumerchant_bank_id){
							that.$utils.showMessage("请选择银行")
							return
						}
						that.$api.changeUserCard(form).then(res=>{
							that.$store.dispatch("getUserCard")
							that.$utils.showMessage("添加成功",()=>{
								uni.navigateBack();
							})
						})
					}).catch(err=>{
						that.$utils.showMessage(err[0].errorMessage)
					})
				} else {
					form = this.form2
					this.$refs.form2.validate().then(res=>{
						if(!form.mumerchant_bank_id){
							that.$utils.showMessage("请选择银行")
							return
						}
						if(!form.expiration_date_year){
							that.$utils.showMessage("请选择有效期")
							return
						}
						if(!form.expiration_date_month){
							that.$utils.showMessage("请选择有效期")
							return
						}
						that.$api.changeUserCard(form).then(res=>{
							that.$store.dispatch("getUserCard")
							that.$utils.showMessage("添加成功",()=>{
								uni.navigateBack();
							})
						})
					}).catch(err=>{
						that.$utils.showMessage(err[0].errorMessage)
					})
				}

				console.log(form);
			},
			//选择银行
			selectedBank(e) {
				if (this.current == 0) {
					this.form1.mumerchant_bank_id = e
				} else {
					this.form2.mumerchant_bank_id = e
				}
				// console.log(e);
			},
			//获取银行列表
			getBankList() {
				let that = this;
				this.$api.getBankList().then(res => {
					// console.log(res);
					if (res && res.length > 0) {
						let bankList = []
						res.forEach(item => {
							bankList.push({
								text: item.name,
								value: item.id
							})
						})
						that.bankList = bankList
					}
					// that.bankList = res;
				})
			},
			//选择tab
			changeTab(index) {
				this.current = index
			},
			//选择证件类型
			change(e) {
				console.log(e);
				var index = e.detail.value;
				var id_types = this.id_types;
				var current = this.current;
				if (current == 0) {
					this.form1.id_type = id_types[index]
				} else {
					this.form2.id_type = id_types[index]
				}

				// console.log(this.form.id_type);
			},
			//选择日期
			changeDate(e) {
				console.log(e);
				var value = e.detail.value
				this.form2.expiration_date = value;
				let newval = value.split('-')
				// console.log(newval);
				this.form2.expiration_date_year = newval[0].substr(-2);
				this.form2.expiration_date_month = newval[1];
				console.log(this.form2);
			},
			//跳转到协议
			xieyi() {
				uni.navigateTo({
					url: "/pages/user/agreement?type=tripartite"
				})
			}
		}
	}
</script>

<style lang="scss">
	.khap {
		width: 550rpx;
	}

	.banks {
		width: 400rpx;
		height: 30rpx;
	}

	.yedu-top {
		margin-top: 60rpx;
	}

	.yedu-txt {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 14rpx;

		text {
			color: #333333;
			font-weight: 700;
		}
	}

	.yedu-img {
		width: 32rpx;
		height: 32rpx;
	}

	.foot-txt {
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
		margin-left: 175rpx;
	}

	.detal-body-txt {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.detal-body-se {
		color: #333333 !important;
	}

	.detal-body-img {
		width: 14rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.detal-body-one {
		margin-top: 50rpx;
		// margin-bottom: 20rpx;
	}

	.detal-body-ones {
		margin-top: 20rpx;
	}
.detal-body-oness {
		margin-top: 0rpx;
	}
	.detal-body-input {
		text-align: right;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.detal-body-p {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.detal-body-title {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.detal-body {
		width: 690rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.detal {
		width: 750rpx;
		height: calc(100vh - 220rpx);
		background-color: #FFFFFF;
	}

	.add-header-ac {
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: $default-button-color;
		width: 210rpx;
		border-bottom: 3rpx solid $default-button-color ;
		text-align: center;
		padding-bottom: 18rpx;
	}

	.add-header-nc {
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		width: 210rpx;
		text-align: center;
	}

	.add-header-cen {
		width: 750rpx;
		height: 67rpx;
		background-color: #FFFFFF;
		padding-top: 45rpx;

	}

	.add-header {
		width: 560rpx;
		margin-left: 95rpx;
		margin-right: 95rpx;
	}
</style>